<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/WEB-INF/webpage/common/taglibs.jspf" %>
<!DOCTYPE html>
<html>
<head>
    <title>接口列表列表</title>
    <meta name="decorator" content="list"/>
    <html:component name="bootstrap-treeview" />
    <html:css name="iCheck,Validform,jquery-ztree,easy-ui" />
    <html:js name="iCheck,Validform,jquery-ztree,easy-ui,public-js" />
    <script type="text/javascript" src="${staticPath}/common/js/ztree.js"></script>
    <script type="text/javascript" src="${staticPath}/common/js/curdtools_jqgrid_extend.js"></script>
</head>
<body title="接口列表">
<div class="easyui-layout" fit="true" id="cc" style="width:100%;">
    <div data-options="region:'west',split:true" style="width:15%;" title="流程类型">
        <div class="zTreeDemoBackground left">
            <ul id="treeObj" class="ztree"></ul>
        </div>
    </div>
    <div data-options="region:'center'" title="流程类型">
        <grid:grid id="infcGridId" url="${adminPath}/sys/infc/ajaxList" sortname="t.create_date" sortorder="desc">
            <grid:column label="sys.common.key" hidden="true" name="id" width="100"/>
            <grid:column label="接口类别" name="typeId" hidden="true" query="true" queryMode="hidden"/>
            <grid:column label="接口编号" name="code" query="true"/>
            <grid:column label="sys.common.opt" name="opt" formatter="button" width="160"/>
            <grid:button title="查看结果" groupname="opt" function="viewResult"
                         outclass="btn-primary" innerclass="fa-link"
                         url="${adminPath}/getway/network/getnetdata"/>
            <grid:button title="查看URL" groupname="opt" function="viewInfcUrl"
                         outclass="btn-primary" innerclass="fa-link"
                         url="${adminPath}/sys/infc/viewInfcUrl"/>
            <grid:column label="接口名称" name="name"/>
            <grid:column label="图表类型" name="chartType" query="true" queryMode="select" condition="eq" dict="echartsReportType"/>
            <grid:column label="请求类型" name="reqType" query="true" queryMode="select" condition="eq" dict="reqType"/>
            <grid:column label="操作类型" name="operType" query="true" queryMode="select" condition="eq" dict="operType"/>
            <grid:column label="使用设备" hidden="true" name="useEqp" dict="useEqp"/>
            <grid:column label="使用设备" name="useEqpText"/>
            <grid:column label="使用设备" name="supportType" dict="supportType"/>
		    <grid:column label="返回类型"  name="returnType"  dict="ReturnType"/>
            <grid:column label="接口url" name="interfaceUrl"/>
            <grid:column label="接口url" name="infcUrl" hidden="true"/>
            <grid:column label="定义sql" name="definedSql"/>
            <grid:column label="请求body" name="reqBody"/>
            <grid:column label="状态"  name="status" align="center" width="80" dict="useStatusType"
                         formatterClass="1:label label-primary;0:label label-warning" />

            <grid:toolbar title="新增" btnclass="create-button btn btn-fa-plus" icon="fa-plus"
                          function="toCreate"
                          url="${adminPath}/sys/infc/create"
                          winwidth="80%" winheight="80%"/>
            <grid:toolbar function="update" winwidth="80%" winheight="80%"/>
            <grid:toolbar function="enabled"/>
            <grid:toolbar function="unabled"/>
            <grid:toolbar function="delete"/>

            <grid:toolbar function="search"/>
            <grid:toolbar function="reset"/>
        </grid:grid>
    </div>
</div>

<script type="text/javascript">

    var gridId = 'infcGridIdGrid';
    var treeObj = null;
    var ztreeNode = '';

    /**
     * @description 初始化加载js.<br>
     * @date 2018/3/29.<br>
     * @author zcg .<br>
     */
    $(function() {
        initZtree();
    });

    function initZtree() {
        var url = '${adminPath}/sys/sysinterfacetype/getZtree';
        $.ajax({
            url: url,
            type: 'get',
            success: function (res) {
                if (res) {
                    var arr = [];
                    for (var item of res) {
                        arr.push({
                            id: item.id,
                            name: item.name,
                            pId: item.pid,
                            open: true
                        })
                    }
                    $.fn.zTree.init($("#treeObj"), setting, arr);
                }
            }
        })

    }

    /**
     * @description 新增流程.<br>
     * @date 2018/8/27.<br>
     * @author zcg .<br>
     */
    function toCreate(title,url,gridId,width,height) {
        if (ztreeNode === '') {
            top.layer.msg('请选择类型', {icon: 0, time: 5000});
            return;
        }
        url = url + '?nodeId=' + ztreeNode.id + '&nodeName=' + ztreeNode.name;
        create(title,url,gridId,width,height)
    }

    /**
     * @description 设置加载配置.<br>
     * @date 2018/3/29.<br>
     * @author zcg .<br>
     */
    var setting = {
        data: {
            simpleData: {
                enable: true,
                pIdKey: "pId"
            }
        },
        callback : {
            onClick : onClick
        }
    };

    function onClick(event, treeId, treeNode, clickFlag) {
        ztreeNode = treeNode;
        $("input[name='typeId']").val(treeNode.id);
        search(gridId);
    }

    function viewInfcUrl(title, url, gridId, id, tipMsg) {
        var row = $("#" + gridId).jqGrid('getRowData', id);
        if (row.infcUrl !== undefined && row.infcUrl !== '' && row.infcUrl.trim() !== '') {
            var html = '<div class="page-header"><h1 class="text-center"><a href="' + row.infcUrl + '" target="_blank">'+row.infcUrl+'</a></h1></div>';
            var i = top.layer.open({
                type: 1,
                area: ['60%', '180px'],
                title: title,
                maxmin: true, //开启最大化最小化按钮
                content: html,
                btn: ['关闭'],
                cancel: function(index){

                },
                success: function(layero,index){
                }
            });
        } else {
            top.layer.msg('该接口没有配置URL', {icon: 0, time: 5000});
        }
    }

    // 查看接口返回
    function viewResult(title, url, gridId, id, tipMsg) {
        var row = $("#" + gridId).jqGrid('getRowData', id);
        if (row.code !== undefined) {
         
            url = '${ctx}/getway/network/getnetdata?code=' + row.code;

            var index = top.layer.load(0, {
                content: '<span>请稍等...</span>',
                shade: [0.3,'#fff'],
                shadeClose : false
            }); 
            $.ajax({
                async: true,
                url: url,
                type: 'post',
                data: {
                	
                },
                dataType: 'json',
                success: function (res, textStatus, jqXHR) {
                    var html = '<div class="jumbotron"><pre>' + JSON.stringify(res, null, 4) + '</pre></div>';
                    var i = top.layer.open({
                        type: 1,
                        area: ['60%', '60%'],
                        title: title,
                        maxmin: true, //开启最大化最小化按钮
                        content: html,
                        btn: ['关闭'],
                        cancel: function(index){

                        },
                        success: function(layero,index){
                        }
                    });
                    top.layer.close(index);
                    if(res.msg){
                        top.layer.msg(res.msg, {icon: 0, time: 1000});
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    top.layer.msg('系统错误', {icon: 0, time: 1000});
                    top.layer.close(index);
                },
                complete: function(XMLHttpRequest, textStatus) {
                    top.layer.close(index);
                }
            })

        }
    }
</script>
</body>
</html>